<template>
	<view class="container" :style="{paddingTop: statusBarHeight + 'px', background: 'linear-gradient(to bottom, #FF2F3A 0%, #FE4650 '+ (statusBarHeight + 44)+'px ,#F8F8F8  672rpx ,  #F8F8F8 100%)'}">
		<view style="position: fixed; top: 0; left: 0; width: 100vw; background: linear-gradient(to bottom, #FF2F3A 0% ,  #FE4650 100%);;z-index: 10;" :style="{paddingTop: statusBarHeight + 44 + 'px'}">
		</view>
		<uni-nav-bar title="合作申请" :border="false" left-icon="left"  background-color="transparent" fixed color="#fff" class="nav_bar" @clickLeft="back" ></uni-nav-bar>
		<view class="center">
			<view class="title">
				<image src="../../../static/dianpu.png" mode="widthFix" class="img"></image>
				<text>消费合伙人和门店介绍人需先选择门店</text>
			</view>
			<view class="divider">
				<view class="text">
					招募
				</view>
			</view>
			<view class="card">
				<uni-grid :column="2" :show-border="false" :square="false" @change="toApply1">
					<uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">
						<view class="grid-item-box">
							<image class="image" :src="item.url" mode="aspectFill" />
							<text class="text">{{item.text}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
			<view class="divider">
				<view class="text">
					申请
				</view>
			</view>
			<view class="card">
				<uni-grid :column="3" :show-border="false" :square="false" @change="toApply2">
					<uni-grid-item v-for="(item ,index) in list1" :index="index" :key="index">
						<view class="grid-item-box">
							<image class="image" :src="item.url" mode="aspectFill" />
							<text class="text">{{item.text}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
		<view class="tips">
			温馨说明：申请提交后，请耐心等待工作人员的审核！如有疑问可以联系市场客服人员。
		</view>
		<view class="result" @click="toResult">
			查看申请结果
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight:'',
				list: [{
						url: '/static/CooperationMenDianFuZeRen.png',
						text: '门店负责人',
						type: 'CooperationMenDianFuZeRen'
					},
					{
						url: '/static/CooperationChuangLian.png',
						text: '联创',
						type: 'CooperationChuangLian'
					}
				],
				list1: [{
						url: '/static/CooperationHeHuoRen.png',
						text: '合伙人',
						type: 'CooperationHeHuoRen'
					},
					{
						url: '/static/CooperationDaiLi.png',
						text: '代理',
						type: 'CooperationDaiLi'
					},
					{
						url: '/static/CooperationHuiYuan.png',
						text: '会员',
						type: 'CooperationHuiYuan'
					}
				],
				shop_id:''
			};
		},
		onLoad(options) {
		  this.GetStatusBarHeight();
		  if(options.shopId)
		  this.shop_id = options.shopId
		},
		methods:{
			//获取状态栏的高度
			GetStatusBarHeight() {
			    let that = this;
			       wx.getSystemInfo({
			        success: function (res) {
			            that.statusBarHeight = res.statusBarHeight;
			        },
			    });
			},
			back(){
				uni.navigateBack()
			},
			toApply1(e){
				let { index } = e.detail
				let options = ''
				if(this.shop_id != '' ){
					options = '&shop_id=' + this.shop_id
				}
				uni.navigateTo({url:'/pages/shop/cooperationApplyDetail/cooperationApplyDetail?type=' + this.list[index].type + options})
			},
			toApply2(e){
				let { index } = e.detail
				let options = ''
				if(this.shop_id != '' ){
					options = '&shop_id=' + this.shop_id
				}
				uni.navigateTo({url:'/pages/shop/cooperationApplyDetail/cooperationApplyDetail?type=' + this.list1[index].type + options} )
			},
			toResult(){
				uni.navigateTo({url:'/pages/my/myApplyProgress/myApplyProgress'})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	width: 100%;
	background: linear-gradient(to bottom, #FF2F3A 0% ,#F8F8F8  672rpx ,  #F8F8F8 100%);
	// padding: 0 24rpx;
	padding-top: var(--status-bar-height);
	font-family: PingFangSC-Semibold, PingFang SC;
	position: relative;
}
.center {
	background-color: #fff;
	padding: 48rpx;
	border-radius: 16rpx;
	margin: 24rpx 24rpx 0 ;
	.title {
		font-size: 28rpx;
		font-weight: 600;
		color: #FA2C1E;
		line-height: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		.img {
			width: 36rpx;
			height: 36rpx;
			margin-right: 14rpx;
		}
		padding-bottom: 16rpx;
	}
	.divider {
		height: 2rpx;
		margin: 50rpx 0;
		width: 100%;
		background-color: #E7E7E7;
		position: relative;
		.text {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translateX(-50%) translateY(-50%);
			padding: 0 24rpx;
			font-weight: 500;
			color: #222222;
			font-size: 36rpx;
			background-color: #fff;
		}
	}
	.card {
		background: #F8F8F8;
		border-radius: 8rpx;
		// .uni-grid-item {
		// 	width: auto;
		// }
		.grid-item-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 30rpx 0;
			.image {
				width: 84rpx;
				height: 84rpx;
			}
			.text {
				margin-top: 12rpx;
				color: #435E68;
				font-size: 26rpx;
			}
		}
	}
}

.tips {
	padding: 50rpx;
	background-image: url(../../../static/dianzan.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	margin: 28rpx 4rpx 0;
	color: #A86C50;
	font-size: 24rpx;
	line-height: 34rpx;
}

.result {
	position: absolute;
	bottom: 116rpx;
	left: 0;
	width: 100%;
	text-align: center;
	color: #666666;
	line-height: 21px;
	text-decoration:underline;
	font-size: 30rpx;
}

</style>
